<template>
  <Scroll @scroll="scroll" :probeType="probeType" :listenScroll="listenScroll" class="scroll" :data="singerHotSinger">
    <div class="container">
      <div class="bg-layer" ref="layer"></div>
      <ul class="ul">
        <li @click="clickList(index)" v-for="(item,index) of singerHotSinger" :key="index" class="li">
          <span class="count">{{index + 1}}</span>
          <div class="text">
            <span class="name">{{item.name}}</span>
            <span class="text-content">
              <span>{{item.ar[0].name}}</span>&nbsp;-&nbsp;
              <span>{{item.al.name}}</span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </Scroll>
</template>

<script>
import Scroll from '../../../../base/scroll'
export default {
  name: 'SingerListList',
  data() {
    return {
      scrollY: 0
    }
  },
  created() {
    this.probeType = 3
    this.listenScroll = true
  },
  props: {
    singerHotSinger: {
      type: Array,
      default() {
        return []
      }
    },
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y
    },
    clickList(index) {
      let songObj = this.singerHotSinger[index]
      this.$store.commit('songList/MUSIC_IMG',songObj)
      this.$store.commit('songList/MUSIC_LIST_INDEX',index)
      this.$store.commit('songList/SONG_LIST',this.singerHotSinger)
      this.$router.push(`/songPlay/${this.singerHotSinger[index].id}`)
    }
  },
  watch: {
    singerHotSinger() {
    },
    scrollY() {
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="scss" scoped>
.scroll {
  overflow: hidden;
    width: 100%;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    margin-top: -.3rem;
    height: 1020px;
  .container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    // height: 1008px;
    background: #fff;
    box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
    margin-top: -30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    position: relative;
    z-index: 1000;
    .bg-layer {
      position: relative;
      height: 100%;
      background: #222;;
    }
    .ul {
      display: flex;
      // height: 1008px;
      // overflow: scroll;
      flex-direction: column;
      .li {
        display: flex;
        align-items: center;
        padding: 30px 40px;
        height: 120px;
        .count {
          font-size: 50px;
          color: #999;
          width: 100px;
        }
        .text {
          display: flex;
          flex-direction: column;
          line-height: 47px;
          flex: 1;
          .name  {
            font-size: 40px;
          }
          .text-content {
            font-size: 30px;
            color: #999;
            margin-top: 12px;
          }
        }
      }
    }
  }
}
</style>